<script setup>
// inject：获取node节点数据
import { ref, inject } from "vue";
import { useMessage } from "naive-ui";
// 新增修改节点弹窗
// @ts-ignore
import AddEditFrom from "./AddEditFrom.vue";
const message = useMessage();
// inject：获取node节点数据
const getNode = inject("getNode");
// inject：获取node节点数据
const node = getNode();
// 节点数据
let dataObj = ref(node.data);

// 子节点数统计
const nodeNum = ref(0);
let addNodeArrJson = localStorage.getItem("addNodeArr");
if (addNodeArrJson) {
  addNodeArrJson = JSON.parse(addNodeArrJson);
  nodeNum.value = addNodeArrJson.filter(
    (item) => item.data.parentId === node.id
  ).length;
}

// 打开新增弹窗
const showModal = ref(false);

// 取消新增修改
const addClose = () => {
  showModal.value = false;
};

// 新增弹窗Dom元素
const addNodeDom = ref(null);
// 新增或者修改 1新增 2修改
const type = ref(1);
// 更新原数据
const updateObj = ref(null);
// 父节点id
const parentId = ref("");
const openShowModal = (num) => {
  if (num == 2) {
    updateObj.value = JSON.parse(JSON.stringify(node.data));
  } else {
    parentId.value = node.id;
  }
  type.value = num;
  showModal.value = true;

  setTimeout(() => {
    // 引用子组件方法更新表单数据
    addNodeDom.value.updateForm();
  }, 10);
};
// 新增修改节点
const addOpen = (formData, type) => {
  // 新增方法
  formData.add = node.data.add;
  // 删除方法
  formData.del = node.data.del;
  // 更新方法
  formData.update = node.data.update;
  // 收起展开子任务方法
  formData.expandNode = node.data.expandNode;
  //收起展开子节点方法
  formData.expandNodeChild = node.data.expandNodeChild;
  if (type == 1) {
    node.data.add(formData);
  } else {
    node.data.update(node.id, formData);
  }
};

// 添加删除按钮的隐藏显示
const jiaBob = ref(false);

// 删除节点的提示框确认按钮
const handlePositiveClick = () => {
  node.data.del(node.id);
};

// 子任务展开收起
const zhankai = () => {
  node.data.expandNode(node.id);
};

// 子节点展开收起
const zhankaiNode = () => {
  node.data.expandNodeChild(node.id);
};

// 本地图片转base64数据
const imagsToBase64 = async (imagePath) => {
  function getBase64FromPath(path) {
    return new Promise((resolve) => {
      var xhr = new XMLHttpRequest();
      xhr.onload = function () {
        var reader = new FileReader();
        reader.onloadend = function () {
          resolve(reader.result);
        };
        reader.readAsDataURL(xhr.response);
      };
      xhr.open("GET", path);
      xhr.responseType = "blob";
      xhr.send();
    });
  }

  let base64 = await getBase64FromPath(imagePath);

  return base64;
};

// 为了导出流程图不会缺少图片，需要将图片地址转成base64格式
const imgUrlObj = ref({
  add: "",
  del: "",
  shouqi1:
    "",
  touxiang:
    "",
  update:
    "",
});
imagsToBase64("/images/add.png").then((res) => {
  imgUrlObj.value.add = res;
});
imagsToBase64("/images/del.png").then((res) => {
  imgUrlObj.value.del = res;
});
imagsToBase64("/images/shouqi1.png").then((res) => {
  imgUrlObj.value.shouqi1 = res;
});
imagsToBase64("/images/touxiang.png").then((res) => {
  imgUrlObj.value.touxiang = res;
});
imagsToBase64("/images/update.png").then((res) => {
  imgUrlObj.value.update = res;
});
</script>

<template>
  <div>
    <div
      @mouseover="jiaBob = true"
      @mouseout="jiaBob = false"
      style="
        width: 300px;
        height: 130px;
        position: relative;
        background-color: white;
        box-shadow: 2px 2px 10px #f1f1f1;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      "
    >
      <div style="display: flex; flex-direction: column; margin: 0 12px 0 12px">
        <span
          style="
            font-size: 12px;
            text-align: start;
            color: #999999;
            margin-bottom: 5px;
          "
          >{{ dataObj.time }}</span
        >
        <span
          style="
            text-align: start;
            width: 276px;
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 600;
            color: #5b5f65;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          "
          :title="dataObj.title"
          >{{ dataObj.title }}</span
        >
        <div
          style="
            box-sizing: border-box;
            padding-right: 10px;
            display: flex;
            align-items: center;
          "
        >
          <n-progress
            style="box-sizing: border-box; align-items: center"
            indicator-text-color="#a7a8aa"
            :color="
              Number(dataObj.num) >= 100
                ? '#12d26a'
                : Number(dataObj.num) >= 50
                ? '#e84033'
                : '#008ad3'
            "
            type="line"
            :percentage="Number(dataObj.num)"
          />
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            margin-top: 5px;
            justify-content: space-between;
          "
        >
          <div style="display: flex; align-items: center">
            <img
              :src="imgUrlObj.update"
              style="
                margin-right: 5px;
                width: 20px;
                height: 20px;
                cursor: pointer;
              "
              @click="openShowModal(2)"
            />
            <span
              v-if="dataObj.level == 0"
              style="
                box-sizing: border-box;
                padding: 2px 5px;
                background-color: #d9e6fa;
                color: #658ecc;
                border-radius: 10px;
                margin-right: 5px;
                font-size: 10px;
              "
              >公司级</span
            >
            <span
              v-if="dataObj.level == 1"
              style="
                box-sizing: border-box;
                padding: 2px 5px;
                background-color: #e4eedd;
                color: #9cb776;
                border-radius: 10px;
                margin-right: 5px;
                font-size: 10px;
              "
              >个人级</span
            >
            <div
              style="
                display: flex;
                align-items: center;
                border: 1px solid #f1f1f1;
                border-radius: 5px;
                padding: 0 5px;
              "
            >
              <img
                :src="imgUrlObj.touxiang"
                style="width: 18px; height: 18px; margin-right: 3px"
                alt=""
              />
              <span style="font-size: 12px; font-weight: 600; color: #5b5f65">{{
                dataObj.name
              }}</span>
            </div>
          </div>

          <img
            v-if="dataObj.taskArr.length > 0"
            @click="zhankai"
            :style="{
              transform: dataObj.closed ? 'rotate(0deg)' : 'rotate(180deg)',
              width: '22px',
              height: '22px',
              cursor: 'pointer',
              marginLeft: '10px',
            }"
            :src="imgUrlObj.shouqi1"
            alt=""
          />
        </div>
      </div>
      <img
        :src="imgUrlObj.add"
        v-show="jiaBob"
        style="
          cursor: pointer;
          width: 20px;
          height: 20px;
          position: absolute;
          right: 10px;
          top: 10px;
        "
        @click="openShowModal(1)"
      />
      <n-popconfirm
        negative-text="取消"
        positive-text="确定"
        @positive-click="handlePositiveClick"
      >
        <template #trigger>
          <img
            v-show="jiaBob"
            style="
              cursor: pointer;
              width: 20px;
              height: 20px;
              position: absolute;
              right: 40px;
              top: 10px;
            "
            :src="imgUrlObj.del"
            alt=""
          />
        </template>
        是否确认删除节点？
      </n-popconfirm>

      <!-- 子节点统计和收缩展开 -->
      <div
        @click="zhankaiNode"
        v-if="nodeNum > 0"
        style="
          z-index: 9999;
          position: absolute;
          top: 54.5px;
          right: -44px;
          cursor: pointer;
          width: 40px;
          background-color: white;
          border-radius: 10px;
          display: flex;
          justify-content: center;
        "
      >
        <span
          style="
            box-sizing: border-box;
            width: 4px;
            background-color: #999999;
            border: 0.5px solid #c7c8cc;
            position: absolute;
            z-index: 9999;
            left: -4px;
            top: 10px;
          "
        ></span>
        <span style="color: #4594d5; font-size: 12px">
          <{{ nodeNum > 99 ? "99+" : nodeNum }}
        </span>
      </div>
    </div>

    <div
      v-if="dataObj.closed"
      style="display: flex; flex-direction: column; box-sizing: border-box"
    >
      <div
        style="
          box-sizing: border-box;
          margin-top: 6px;
          padding: 10px;
          width: 300px;
          height: 40px;
          display: flex;
          justify-content: space-between;
          background-color: white;
          box-shadow: 2px 2px 10px #f1f1f1;
          border-radius: 10px;
          position: relative;
          z-index: 9999;
        "
        v-for="(item, index) in dataObj.taskArr"
      >
        <span
          style="
            height: 6px;
            width: 2px;
            background-color: #999999;
            position: absolute;
            top: -6px;
            left: 20px;
            z-index: 9999;
          "
        ></span>
        <div style="font-size: 12px; color: #999999; margin-right: 10px">
          KR{{ index + 1 }}
        </div>
        <div
          style="
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 600;
            color: #5b5f65;
          "
          :title="item.title"
        >
          {{ item.title }}
        </div>
        <span style="font-size: 12px; color: #999999; margin-left: 20px"
          >{{ item.num }}%</span
        >
      </div>
    </div>

    <!-- 新建修改弹窗 -->
    <AddEditFrom
      ref="addNodeDom"
      :parentId="parentId"
      :updateObj="updateObj"
      :type="type"
      :showModal="showModal"
      @addClose="addClose"
      @addOpen="addOpen"
    />
  </div>
</template>

<style lang="scss" scoped></style>
